<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>user</title>
<script type="text/javascript">
var layerPage;//弹出框关闭时用到
function showShopTree() {
	layerPage = layer.open({
		title : "选择门店",
		type : 2,
		content : 'management/shop/shopTree'
	});
}
function showTreeData(treeNode) {
	$("#shopName").val(treeNode.name);
	$("#shopId").val(treeNode.id);
}
function search(){ 
    	//判断参数是否都有填
    	$("#error").text("");
    	var message="";
    	var shopName = $("#shopName").val();
    	if(shopName==null||shopName==""){
    		message+="请选择需要查询的门店";
    		$("#error").text(message);
    		return;
    	}
    	var begDate = $("#begDate").val();
    	if(begDate==null||begDate==""){
    		message+="请选择起始日期";
    		$("#error").text(message);
    		return;
    	}
    	var now = new Date();
    	var nowdata = now.getFullYear()+"-"+((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1);
    	var date1 = new Date(Date.parse(nowdata.replace("-", "/")));
        var date2 = new Date(Date.parse(begDate.replace("-", "/")));
    	if(date1 < date2){
    		message+="日期只能选择本月，以及本月之前";
    		$("#error").text(message);
    		return;
    	}
    	//通过ajax查询数据，回填到yemi
    	$("#queryForm").ajaxSubmit({
			dataType : "json",
			success : function(data) {
				backFile(data);
			}
		});
    }
function backFile(list){
	$("#tab").empty();
	for(var i=0;i<list.length; i++){
		if(list[i].type&&i>0){
			$("#tab").append("<br>")
		}
		var trHTML = "<tr><td class='cen'>"+list[i].employeeTitle+"</td>"+//头衔
		"<td class='cen'>"+list[i].employeeName+"</td>"+//名称
		"<td class='cen'>"+list[i].employeeServiceResults+"</td>"+//项目业绩
		"<td class='cen'>"+list[i].employeeServiceCommission+"</td>"+//项目提成
		"<td class='cen'>"+list[i].employeeTakeOutResults+"</td>"+//外卖业绩
		"<td class='cen'>"+list[i].employeeTakeOutCommission+"</td>"+//外卖提成
		"<td class='cen'>"+list[i].amount+"</td>"+//提成总计
		"</tr>";
		$("#tab").append(trHTML);//在table最后面添加一行
	}
	
	
}
</script>
<style type="text/css">
 .cen{
 	text-align: center;
 }
</style>
</head>

<body>
	<ol class="am-breadcrumb am-breadcrumb-slash am-padding" style="margin-bottom: 0px;">
		<li><a href="management/index">首页</a></li>
		<li class="am-active">员工工资报表</li>
	</ol>
	<div class="am-g">
	    <div class="am-u-md-12">
		<form id="queryForm" class="am-form-inline" role="form" action="management/report/getWageReport" method="post">
		  <div class="am-form-group">
		    <input class="am-form-field" type="text" id="shopName" name="shopName" placeholder="请输选择门店" readonly onclick="showShopTree();">
		  </div>
		  
		  	<input type="hidden" id="shopId" name="shopId">
		  	
		  <div class="am-form-group">
		    <input class="am-form-field" type="text" name="begDate" id="begDate" placeholder="请输选择查询的年份月份"  data-am-datepicker="{format: 'yyyy-mm'}" readonly>
		  </div>
		  
		  <button id ="searchBtn" onclick="search()" type="button" class="am-btn am-btn-default">搜索</button>
		  <label id="error" style="color: red;"></label>
		</div>
		</form>
	</div>
	<div class="am-g am-padding-vertical">
		<div class="am-u-md-12">
			<table id="grid" border=1 style="width:100%;" cellspacing=0 cellpadding=0 bordercolordark="#000000" bordercolorlight="#ffffff">
			    <thead>
			        <tr>
			            <th class="cen" >头衔</th>
			            <th class="cen" >姓名</th>
			             <th class="cen" >项目业绩</th>
			            <th  class="cen" >项目提成</th>
			            <th  class="cen" >外卖业绩</th>
			            <th  class="cen" >外卖提成</th>
			            <th  class="cen" >提成总计</th>
			        </tr>
			    </thead>
			    <tbody id="tab">
		    	</tbody>
		</table>
		</div>
	</div>
</body>
</html>
